<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>小潘个人站</title>
	<link href="misc/css/base.css" rel="stylesheet" type="text/css" media="all" />
	<link href="misc/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<script src="misc/js/jquery-1.9.1.js" type="text/javascript"></script>
	<link rel="Shortcut Icon" href="misc/img/pan.ico" />
	<link rel="Bookmark" href="misc/img/pan.ico" />
</head>
<body>
<div id="wrap">
	<div class="header"></div>
	<div class="nav">
		<ul>
			<li style="padding-right:15px;"><a href="#">Pan</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#work">Works</a></li>
			<li style="width:100px;"><a href="#contact">Contact</a></li>
		</ul>
	</div>
	<div class="banner"><img src="misc/img/p1.jpg" alt="" /></div>
	<a name="about"></a>
	<div class="about"><img src="misc/img/about.png" alt="" /></div>
	<div class="job">
		<div class="jobBgImg">
			<div class="jobList">
				<h2><img src="misc/img/t.png" alt="" /></h2>
				<ul class="clearfix">
					<li class="design">
						<a href="javascript:void(0);"><img src="misc/img/c1.png" changeSrc="misc/img/c11.png" alt="" /></a>
					</li>
					<li class="Dance">
						<a href="javascript:void(0);"><img src="misc/img/c2.png" changeSrc="misc/img/c22.png" alt="" /></a>
					</li>
					<li class="Ps">
						<a href="javascript:void(0);"><img src="misc/img/c3.png" changeSrc="misc/img/c33.png" alt="" /></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<a name="work"></a>
	<div class="work">
		<div class="computer"><img src="misc/img/computer.png" alt="" /></div>
		<div class="picList">
			<ul class="clearfix">
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
				<li><img src="misc/img/pic1.jpg" alt="" /></li>
			</ul>
		</div>
	</div>
	<a name="contact"></a>
	<div class="footer">
		<div class="qq"></div>
		<div class="contact">
			<div class="tel">
				<h3>CONTACT</h3>
				<div>Phone：15868865128</div>
				<div>Mail：363138762@qq.com</div>
				<div>QQ：363138762</div>
				<div class="menu"><a href="#">HOME</a><a href="#about">ABOUT</a><a href="#work">WORK</a></div>
			</div>
			<div class="copy">
				© 2013 Designer By Pan Hui Yue | All Rights Reserved 
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('.jobList a').mouseenter(function(){
		var $imgDom = $(this).find('img'),
			thisSrc = $imgDom.attr('src'),
			changeSrc = $imgDom.attr('changeSrc');
		$imgDom.animate({'width':'0px','height':'174px','margin-left':'87px'},300,function(){
			$imgDom.attr('src',changeSrc).attr('changeSrc',thisSrc);
			$(this).animate({'width':'174px','height':'174px','margin-left':'0px'},200)
		});
	});
});
</script>
</body>
</html>